<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.close"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form ref="formNotepadRef" :rules="rulesNotepad" :model="formNotepad" label-width="180px">
      <el-form-item label="记事类型" prop="typeId">
        <el-select v-model="formNotepad.typeId" placeholder="请选择记事类型">
          <el-option
            v-for="item in notepadTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="重要程度" prop="importance" >
        <!--不加入自动设置颜色，会导致后面无法解析到底哪些是录入的，哪些是自带的-->
        <!--@change="importanceChange"-->
        <el-select v-model="formNotepad.importance" placeholder="请选择重要程度" >
          <el-option label="核心级" :value="0"></el-option>
          <el-option label="重要紧急" :value="1"></el-option>
          <el-option label="不重要但紧急" :value="2"></el-option>
          <el-option label="重要但不紧急" :value="3"></el-option>
          <el-option label="不重要不紧急" :value="4"></el-option>
        </el-select>
      </el-form-item>

      <el-row>
        <el-col :span="2">
          <el-form-item label="颜色标记" >
            <el-color-picker v-model.trim="formNotepad.flagColour"></el-color-picker>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="" >
            <el-input v-model.trim="formNotepad.flagColour"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="标题" prop="title" >
        <el-input v-model.trim="formNotepad.title"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content" >
        <mavon-editor v-model="formNotepad.content" :toolbars="toolbars"
                      ref="md" @imgAdd="imgAdd" @imgDel="imgDel" @change="changeData"/>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd" v-if="defaultValue.saveUpdSelect !== 'select'">{{defaultValue.title}}</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import http from '@/utils/http'
  import {clearInvalid} from "../../utils/utils"

  export default {
    name: "NotepadSaveUpd",
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          close: true,
          // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
          lockScroll: false,
          appendToBody: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 记事类型
        notepadTypeList: [],
        // 上传图片等都需要用到这个标记
        flagId: null,
        // 要提交的数据
        formNotepad: {
          userId: null,
          typeId: null,
          title: null,
          content: '',
          importance: null,
          flagColour: null,
        },
        // 校验规则
        rulesNotepad: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
          typeId: [{ required: true, message: '请选择记事类型', trigger: 'change' }],
        },
        // 工具类显示的东西 md 插件工具栏配置。下面的去掉一个就会少一个功能
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        },
      }
    },
    methods: {
      /**
       * md数据发生变化的时候
       * @param value 是文本值
       * @param render 渲染出的html文本
       */
      changeData(value, render) {
        // this.showContent = render;
        // console.log(render);
      },
      /**
       * md的图片删除被触发
       * @param pos
       */
      imgDel(pos){
        // 图片是一个数组，那么这里直接通过pos[0]取出文件路径。
        http.post("/uploading/delImage", {
          path: pos[0],
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * md的图片新增被触发
       * @param pos 这里的pos就是图片的信息
       * @param file 上传的文件
       */
      imgAdd(pos, file){
        if (!this.flagId){
          this.$message.error("服务器还未初始化，请稍后再上传图片");
        }
        let formData = new FormData()
        formData.append("flagId", this.flagId)
        formData.append("file", file)

        http.postFileForm("/notepad/uploadContentImage", formData).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 替换在markerDown中的图片路径
          this.$refs.md.$img2Url(pos, res.data)
          this.$message.success("上传图片成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 当重要性发生变化
       * @param value 参数值
       */
      importanceChange(value){
        if (value == null){
          // 绿色 #57B40D
          this.formNotepad.flagColour = "#85E931"
        } else if (0 === value){
          // - #CD1D8A
          this.formNotepad.flagColour = "#E240AD"
        } else if (1 === value){
          // #FE8787
          this.formNotepad.flagColour = "#FDADAE";
        } else if (2 === value){
          // #FD8F1E
          this.formNotepad.flagColour = "#FEAA54";
        } else if (3 === value){
          // #FCE407
          this.formNotepad.flagColour = "#FEEF63";
        } else {
          this.formNotepad.flagColour = "#81D70A";
        }
      },
      /**
       * 打开弹出框之前
       * @param value 保存还是修改or查看,取值有 select \ save \ upd
       * @param obj 如果是修改和查看，则是详细数据,需要赋值
       * @param notepadTypeList 记事类型
       */
      openNotepadPage(value, obj, notepadTypeList){
        this.notepadTypeList = notepadTypeList
        this.defaultValue.saveUpdSelect = value
        this.initNotepad()

        if (value === 'save'){
          this.defaultValue.title = '新增记事本'
          // 获取上传图片要用到的标记
          this.getFlag()

        } else if (value === 'upd'){
          this.defaultValue.title = '修改记事本'
          this.formNotepad = JSON.parse(JSON.stringify(obj))
          this.flagId = this.formNotepad.id

        } else {
          this.defaultValue.title = '记事本详情'
          this.formNotepad = obj
        }

        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['任务计划中心', '记事本', this.defaultValue.title])
      },
      /**
       * 是保存还是修改
       */
      toSaveUpd(){
        if (this.defaultValue.saveUpdSelect === 'save'){
          this.saveNotepad()

        } else if (this.defaultValue.saveUpdSelect === 'upd'){
          this.updNotepad()

        } else {

        }
      },
      /**
       * 获取标记，这个标记用来解决同一组图片上传的问题
       */
      getFlag(){
        http.get("/uploading/getFlag", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.flagId = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存记事本
       */
      saveNotepad(){
        this.formNotepad.flagId = this.flagId
        http.post("/notepad/saveNotepad", this.formNotepad).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("保存成功");
          this.$emit('getNotepadListPage', null)
          // 关闭弹出框
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 更新记事本
       */
      updNotepad(){
        clearInvalid(this.formNotepad)
        http.post("/notepad/updNotepad", this.formNotepad).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("修改成功");
          this.$emit('getNotepadListPage', null)
          // 关闭弹出框
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化参数，防止旧数据污染
       */
      initNotepad(){
        this.formNotepad = {
          userId: null,
          typeId: null,
          title: null,
          // 为空会报错
          content: '',
          importance: null,
          flagColour: null,
        }
      },
    },
  }
</script>

<style scoped>

</style>
